<template>
  <div style="padding-left: 10%">
    <el-button type="primary" size="small" @click="dialogFormVisible = true">新增任务</el-button>

    <el-table :data="tableData" stripe style="width: 90%" size="middle">
      <el-table-column prop="name" label="任务名称" width="180"></el-table-column>
      <el-table-column prop="cron" label="cron表达式" width="180"></el-table-column>
      <el-table-column label="定时方法" width="420">
        <template v-slot="scope">
          {{scope.row.clazz}}.{{scope.row.methodName}}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80">
        <template v-slot="scope">
          {{scope.row.triggerState === 'PAUSED' ? '暂停' : '开启'}}
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="描述/备注"></el-table-column>
      <el-table-column fixed="right" label="操作" width="240">
        <template v-slot="scope">
          <el-button type="text" size="middle" @click="editTask(scope.row)">编辑</el-button>
          <el-button type="text" size="middle" @click="triggerTask(scope.row)">手动触发</el-button>
          <el-button v-if="scope.row.triggerState !== 'PAUSED'" type="text" size="middle" @click="pauseTask(scope.row)">暂停</el-button>
          <el-button v-if="scope.row.triggerState === 'PAUSED'" type="text" size="middle" @click="resumeTask(scope.row)">恢复</el-button>
          <el-button type="text" size="middle" @click="deleteTask(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>



    <el-dialog title="新增任务" :visible.sync="dialogFormVisible" width="30%">
      <el-form ref="form" :model="task">
        <el-form-item>
          <el-input v-model="task.name" placeholder="任务名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="task.clazz" placeholder="定时类" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="task.methodName" placeholder="定时方法" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="textarea" v-model="task.desc" placeholder="任务描述..."></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="task.cron" placeholder="cron表达式" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="task.triggerState" placeholder="请选择任务状态" style="display: block">
            <el-option label="开启" value="NORMAL"></el-option>
            <el-option label="关闭" value="PAUSED"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdateTask()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      task: {
        name: '',
        clazz: '',
        methodName: '',
        desc: '',
        cron: '',
        group: '',
        triggerName: '',
        triggerState: ''
      },
      formLabelWidth: '120px',

      editing: false
    }
  },

  mounted() {
    this.initData()
  },

  methods: {
    initData() {
      this.getRequest("/qrtz").then(data => {
        this.tableData = data;
      });
    },

    saveOrUpdateTask() {
      this.task.group = 'dev'
      this.task.triggerName = this.task.clazz + '.' + this.task.methodName
      if (!this.editing) {
        this.postRequest("/qrtz", this.task).then(resp => {
          if (resp.code === 200) {
            this.initData()
            this.dialogFormVisible = false
            this.$message.success(resp.msg)
          } else {
            this.$message.warning(resp.msg)
          }
        })
      } else {
        this.putRequest("/qrtz", this.task).then(resp => {
          if (resp.code === 200) {
            this.initData()
            this.dialogFormVisible = false
            this.editing = false
            this.$message.success(resp.msg)
          } else {
            this.$message.warning(resp.msg)
          }
        })
      }
    },

    editTask(row) {
      this.task = row
      this.task.extParams = {
        oldGroup: this.task.group,
        oldName: this.task.name
      }
      this.dialogFormVisible = true
      this.editing = true
    },

    triggerTask(row) {
      this.putRequest("/qrtz/trigger", {group: row.group, name: row.name}).then(resp => {
        if (resp.code === 200) {
          this.initData()
          this.$message.success(resp.msg)
        } else {
          this.$message.warning(resp.msg)
        }
      })
    },

    pauseTask(row) {
      this.putRequest("/qrtz/pause", {group: row.group, name: row.name}).then(resp => {
        if (resp.code === 200) {
          this.initData()
          this.$message.success(resp.msg)
        } else {
          this.$message.warning(resp.msg)
        }
      })
    },

    resumeTask(row) {
      this.putRequest("/qrtz/resume", {group: row.group, name: row.name}).then(resp => {
        if (resp.code === 200) {
          this.initData()
          this.$message.success(resp.msg)
        } else {
          this.$message.warning(resp.msg)
        }
      })
    },

    deleteTask(row) {
      this.deleteRequest("/qrtz", row).then(resp => {
        if (resp.code === 200) {
          this.initData()
          this.$message.success(resp.msg)
        } else {
          this.$message.warning(resp.msg)
        }
      })
    }
  }
}
</script>
